<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app-sprotData dpflex fdcolumn">
        <!-- 标题 -->
        <p class="modify-info-title pd16">
            <i class="iconfont icon-prev" onclick="javascript:history.back()"></i>
        </p>
        <!-- 用户运动信息 -->
        <div class="sprotInfoBox dpflex fdcolumn pd16">
            <div class="userBox dpflex justspacebt">
                <span class="fwbold">我的运动数据</span>
                <span class="userBoxImg"></span>
            </div>
            <div class="sprotAllInfo dpflex justspacebt pd16">
                <!-- 总时间 -->
                <div class="flex1 dpflex fdcolumn justspacebt br">
                    <span>总运动</span>
                    <p class="mt16"><span class="move-timer f40 fwbold">99999</span>分钟</p>
                </div>
                <!-- 总卡路里 -->
                <div class="flex1 dpflex fdcolumn justspacebt pl8">
                    <span>本周消耗</span>
                    <p class="mt16"><span class="move-consume f40 fwbold">99999</span>千卡</p>
                </div>
            </div>
            <div class="sprotInfo dpflex justspacebt mt16">
                <p class="dpflex fdcolumn">
                    <span>消耗(千卡)</span>
                    <span class="mt8 fwbold">999</span>
                </p>
                <p class="dpflex fdcolumn">
                    <span>累计(天)</span>
                    <span class="mt8 fwbold">999</span>
                </p>
                <p class="dpflex fdcolumn">
                    <span>连续(天)</span>
                    <span class="mt8 fwbold">999</span>
                </p>
            </div>
        </div>
        <div class="sprotEcharts dpflex fdcolumn">
            <!-- 柱状图 -->
            <div class="sprotEchartsBox mg16 pd16" id="histogram"></div>
            <!-- 圆形 -->
            <div class="sprotEchartsBox mg16 pd16" id="circleGraph"></div>
            <!-- 折线图 -->
            <div class="sprotEchartsBox mg16 pd16" id="lineChart"></div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</body>
</html>